<template>
    <view class="min-h-screen bg-[#f5f5f5] flex justify-center p-[20px]">
      <view class="w-[750rpx] max-w-full">
        <!-- 头部 -->
        <view class="text-center mb-[30px]">
          <text class="text-[#333] text-[24px] mb-[10px] block font-bold">简历投递记录</text>
          <text class="text-[#666] text-[14px]">您已收到 12 份简历投递</text>
        </view>
  
        <!-- 筛选栏 -->
        <view class="bg-white rounded-[8px] p-[15px] mb-[20px] shadow-[0_2px_5px_rgba(0,0,0,0.1)] flex flex-wrap gap-[10px]">
          <nut-picker v-model="selectedPosition" :columns="positionOptions" title="选择职位" />
          <nut-picker v-model="selectedStatus" :columns="statusOptions" title="选择状态" />
          <picker mode="date" :value="startDate" @change="onStartPickerChange">
            <view class="p-[8px_12px] border border-solid border-[#ddd] rounded-[4px] text-[14px]">{{ startDate || '开始日期' }}</view>
          </picker>
          <picker mode="date" :value="endDate" @change="onEndPickerChange">
            <view class="p-[8px_12px] border border-solid border-[#ddd] rounded-[4px] text-[14px]">{{ endDate || '结束日期' }}</view>
          </picker>
          <nut-button class="filter-btn bg-[#1976d2] text-white border-none p-[8px_15px] rounded-[4px]" @click="filterResumes">
            筛选
          </nut-button>
        </view>
  
        <!-- 简历列表 -->
        <view class="bg-white rounded-[8px] overflow-hidden shadow-[0_2px_10px_rgba(0,0,0,0.1)]">
          <view 
            v-for="(resume, index) in resumeList" 
            :key="index"
            class="p-[15px] border-b border-solid border-[#eee] flex items-center transition-all duration-200"
            :class="{'bg-[#f9f9f9]': isHovering === index}"
            @touchstart="isHovering = index"
            @touchend="isHovering = null"
          >
            <view class="w-[50px] h-[50px] rounded-full bg-[#e3f2fd] flex items-center justify-center mr-[15px] text-[#1976d2] font-bold text-[18px]">
              {{ resume.avatar }}
            </view>
            <view class="flex-1">
              <text class="font-bold text-[16px] mb-[3px] block">{{ resume.name }}</text>
              <text class="text-[#666] text-[14px] mb-[3px] block">应聘职位：{{ resume.position }}</text>
              <text class="text-[#999] text-[12px]">打招呼时间：{{ resume.time }}</text>
            </view>
            <view 
              class="p-[5px_10px] rounded-[15px] text-[12px] ml-[15px]"
              :class="{
                'bg-[#e3f2fd] text-[#1976d2]': resume.status === 'new',
                'bg-[#e8f5e9] text-[#388e3c]': resume.status === 'viewed',
                'bg-[#ffebee] text-[#d32f2f]': resume.status === 'rejected'
              }"
            >
              {{ getStatusText(resume.status) }}
            </view>
          </view>
        </view>
  
        <!-- 分页 -->
        <view class="flex justify-center mt-[20px]">
          <nut-button 
            v-for="page in 3" 
            :key="page"
            class="page-btn p-[8px_12px] mx-[5px] border border-solid border-[#ddd] bg-white rounded-[4px]"
            :class="{'bg-[#1976d2] text-white border-[#1976d2]': currentPage === page}"
            @click="changePage(page)"
          >
            {{ page }}
          </nut-button>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import Taro from '@tarojs/taro';
  
  // 筛选选项
  const positionOptions = ref([
    { text: '所有职位', value: 'all' },
    { text: 'SMT技术员', value: 'smt' },
    { text: '品质工程师', value: 'qa' },
    { text: '生产主管', value: 'supervisor' }
  ]);
  const statusOptions = ref([
    { text: '所有状态', value: 'all' },
    { text: '未查看', value: 'new' },
    { text: '已查看', value: 'viewed' },
    { text: '已拒绝', value: 'rejected' },
    { text: '已邀请面试', value: 'invited' }
  ]);
  const selectedPosition = ref('all');
  const selectedStatus = ref('all');
  
  // 简历数据
  const resumeList = ref([
    { avatar: '张', name: '张三', position: 'SMT技术员', time: '2025-07-10 14:30', status: 'new' },
    { avatar: '李', name: '李四', position: '品质工程师', time: '2025-07-09 10:15', status: 'viewed' },
    { avatar: '王', name: '王五', position: 'SMT技术员', time: '2025-07-08 16:45', status: 'rejected' },
    { avatar: '赵', name: '赵六', position: '生产主管', time: '2025-07-07 09:20', status: 'viewed' }
  ]);
  
  const currentPage = ref(1);
  const isHovering = ref(null);
  
  // 状态文本映射
  const getStatusText = (status) => {
    const map = {
      new: '未读',
      viewed: '已回复',
      rejected: '已拒绝'
    };
    return map[status] || '未知状态';
  };
  
  // 筛选简历
  const filterResumes = () => {
    Taro.showToast({
      title: '正在筛选...',
      icon: 'loading',
      duration: 1000
    });
    
    // 实际项目中这里会有筛选逻辑
    setTimeout(() => {
      Taro.showToast({
        title: '筛选完成',
        icon: 'success',
        duration: 1500
      });
    }, 1000);
  };
  
  // 分页切换
  const changePage = (page) => {
    currentPage.value = page;
    Taro.showToast({
      title: `切换到第 ${page} 页`,
      icon: 'none',
      duration: 800
    });
  };
  </script>
  const todayStr = (() => { const d = new Date(); const y = d.getFullYear(); const m = String(d.getMonth()+1).padStart(2,'0'); const day = String(d.getDate()).padStart(2,'0'); return `${y}-${m}-${day}` })();
  const startDate = ref('');
  const endDate = ref('');
  const onStartPickerChange = (e) => { const v = e?.detail?.value ?? e?.target?.value ?? ''; if (v) startDate.value = v; };
  const onEndPickerChange = (e) => { const v = e?.detail?.value ?? e?.target?.value ?? ''; if (v) endDate.value = v; };